<template>
  <view class="g-row">
    <image class="order-bg g-bge1" mode="widthFix" :src="imageUrl +'pice9.png'"></image>
    <u-navbar leftText=" " @rightClick="rightClick" :autoBack="true" placeholder :safeAreaInsetTop="true"
              :bgColor="bgColor">
    </u-navbar>
    <view class="row-licenseplate">
      <view class="m-licenseplatebinding">
        <view class="txt">
          <view class="tit">
            添加车辆
          </view>
          <view class="desc">
            添加车辆，停车支付更便捷
          </view>
        </view>
        <view class="pic">
          <image class="img" mode="widthFix" :src="imageUrl +'pice1.png'"></image>
        </view>
      </view>
      <view class="m-park1 m-licenseplatebindinge2">
        <view class="box1">
          <view class="car">
            <view class="tit" style="font-weight: 600;">
              车牌号码
            </view>
            <Plate :plateNumber="plateNumber" @myPlateChange="plateChange"/>
          </view>
          <view class="radbox">
            <view class="tit">
              车牌类型
            </view>
            <customradio :options="radioOptions" v-model="selectedOption"/>
          </view>
          <view class="form-hg3" v-if="false">
            <view class="form-item">
              <view class="label" style="font-weight: 600;">手机号</view>
              <view class="tel">
                <view class="input" @click="pickerPopShow2=true">
                  <u-input placeholder=""
                           placeholderStyle="font-size:28rpx;color: rgba(28, 39, 76, 0.6);"
                           customStyle="padding: 0; background:transparent; borderRadius:20rpx; height:88rpx;"
                           border="none" disabled v-model="pickerPopValRs2">
                  </u-input>
                  <image class="arrow" mode="widthFix" :src="imageUrl + 'hg-arrow2.png'"></image>
                </view>
                <u-input placeholder="请输入手机号"
                         placeholderStyle="font-size:28rpx;color: rgba(28, 39, 76, 0.6);"
                         customStyle="padding: 0; background:transparent; borderRadius:20rpx; height:88rpx;"
                         border="none" type="number" v-model="phoneVal1">
                </u-input>
              </view>
            </view>
          </view>
        </view>
        <button class="g-submit1 g-submite1" @click="addPlate">立即认证</button>
        <!-- 2.1.1.3车辆管理-车牌绑定-绑定成功 -->
        <!-- 	<button class="g-submit1 g-submite1" @click="popShow2=true">立即认证</button> -->
        <!-- 2.1.1.4.0车辆管理-车牌绑定-绑定失败 -->
        <!-- 	<button class="g-submit1 g-submite1" @click="popShow3=true">立即认证</button> -->
      </view>
    </view>

    <!-- 弹窗 -->
    <u-popup :show="popShow1" mode="center" bgColor="transparent" closeable @close="popShow1=false">
      <view class="popWin-hg1">
        <image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg2.png'"></image>
        <view class="t1">车辆已添加，<br/>
          是否认证该车辆？
        </view>
        <view class="btns">
          <view class="item a1" @click="popShow1=false">跳过</view>
          <view class="item a2">去认证</view>
        </view>
      </view>
    </u-popup>
    <!-- 弹窗 2.1.1.3车辆管理-车牌绑定-绑定成功-->
    <u-popup :show="popShow2" mode="center" bgColor="transparent" closeable @close="popShow2=false">
      <view class="popWin-hg1 m-pope1">
        <image class="bg" mode="widthFix" :src="imageUrl + 'hg-bg2.png'"></image>
        <image class="pic1" mode="widthFix" :src="imageUrl + 'icone1.png'"></image>
        <view class="t1">绑定成功</view>
        <view class="t2">恭喜您绑定成功!</view>
        <view class="btns">
          <view class="item a1" @click="goBack">返回车辆管理</view>
        </view>
      </view>
    </u-popup>
    <!-- 弹窗 2.1.1.4.0车辆管理-车牌绑定-绑定失败 -->
    <u-popup :show="popShow3" mode="center" bgColor="transparent" closeable @close="popShow3=false">
      <view class="popWin-hg1 m-pope1 m-pope2">
        <image class="bg" mode="widthFix" :src="imageUrl + 'pice6.png'"></image>
        <image class="pic1" mode="widthFix" :src="imageUrl + 'icone2.png'"></image>
        <view class="t1">绑定失败</view>
        <view class="t2">车辆已被他人绑定，可上传行驶证等相关证件
          供后台人工审核后解绑
        </view>
        <view class="btns">
          <view class="item a1" @click="popShow3=false">返回车辆管理</view>
          <view class="item a2">申请解绑</view>
        </view>
      </view>
    </u-popup>
    <!-- 手机号区号弹窗 -->
    <u-picker :show="pickerPopShow2" :columns="list2" @confirm="confirm4" @cancel="cancel"
              @close="close"></u-picker>
  </view>
</template>

<script>
import {postForm} from '../../api/myHttps';
import Plate from '@/components/plate.vue'
import customradio from '@/components/customradio.vue'

export default {
  components: {
    Plate,
    customradio
  },
  data() {
    return {
      // 头部背景色
      bgColor: 'transparent',
      plateNumber: ['鄂', 'E', '', '', '', '', '', ''],
      // 单选框数据
      radioOptions: [
        {
          label: '小型车牌',
          value: 'option1'
        },
        {
          label: '小型新能源车牌',
          value: 'option2'
        },
        {
          label: '大型车牌',
          value: 'option3'
        },
        {
          label: '大型新能源车牌',
          value: 'option4'
        }
      ],
      selectedOption: 'option1',
      platesNums: [],

      // 退款弹窗
      popShow1: false,
      popShow2: false,
      popShow3: false,
      // 手机号
      phoneVal1: '',
      pickerPopShow2: false,
      pickerPopValRs2: '+86',
      list2: [
        ['+86', '+86', '+86', '+86', '+86', '+86', '+86', '+86']
      ],
    }
  },
  methods: {
    goBack() {
      this.popShow2 = false;
      uni.navigateBack({
        delta: 1 // 返回的页面数，默认为1
      });
    },
    addPlate() {
      let plate = "";
      this.plateNumber.forEach((item, index) => {
        if (index === 1) {
          plate = plate + item + "·";
        } else {
          plate += item;
        }
      })

      if (plate.length < 7) {
        uni.showToast({
          title: '请输入完整车牌号',
          icon: 'none'
        });
        return;
      }

      let ownerId = uni.getStorageSync("ownerId");
      let params = {
        "ownerId": ownerId,
        "plate": plate.replace('·', ''),
      }
      postForm('/city-mobile/plate/bindPlate', params).then((res) => {
        console.log("打印add:", res);
        this.popShow2 = true;
      })
    },
    // 头部滚动
    onPageScroll(res) {
      if (res.scrollTop >= 60) {
        this.bgColor = '#ffffff'
      } else {
        this.bgColor = 'transparent'
      }
    },
    plateChange(val) {
      this.plateNumber = val;
    },
    // 手机区号弹窗
    confirm4(e) {
      this.pickerPopShow2 = false
      this.pickerPopValRs2 = e.value[0]
    },

  }
}
</script>


<style lang="less" scoped>
.g-row {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
  /* 兼容iOS 11.0-11.2 */
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  /* 兼容iOS 11.2+ */
  overflow: hidden;
  min-height: 100vh;
}
</style>
